@import 'open-props/postcss/style';
@import 'open-props/postcss/normalize';

:root {
  font-family: var(--font-mono);
  body {
    background-color: var(--gray-9);
    display: grid;
    place-content: center;
    place-items: center;
    height: 100vh;
    width: 100vw;
  }
}
h2 {
  text-align: center;
  color: var(--gray-5);
  font-size: 1.2em;
  margin-top: 1em;
  font-weight: lighter;
}
main {
  padding: 0 50px;
  background: white;
  border-radius: 1em;
  box-shadow: 0 20px 25px 0 rgba($color: #000, $alpha: 0.8),
    inset 0 -5px 10px rgba($color: #000000, $alpha: 0.3);

  nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 80px;
    position: relative;
    section {
      display: flex;
      width: 80px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 1;
      position: relative;
      ion-icon {
        font-size: 2.2em;
        transition: 0.5s;
        pointer-events: none;
      }
      span {
        font-size: 0.8em;
        transition: all 0.2s linear;
        font-weight: bold;
        transform: translateY(30px);
        opacity: 0;
        position: absolute;
      }
      &.active {
        ion-icon {
          transform: translateY(-110%);
          color: white;
        }
        span {
          opacity: 1;
          transform: translateY(10px);
        }
      }
    }
    div {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      position: absolute;
      top: -50%;
      background: #df3020;
      border: solid 8px var(--gray-9);
      transition: all 0.3s linear;
      box-shadow: inset 0 0 6px 0
        rgba($color: #000000, $alpha: 1);
      &::before {
        content: '';
        width: 30px;
        height: 10px;
        position: absolute;
        top: 32px;
        left: -8px;
        transform: translateX(-100%);
        background: white;
        border-radius: 15px;
        box-shadow: 5px -5px 0 0 var(--gray-9);
      }
      &::after {
        content: '';
        width: 30px;
        height: 10px;
        position: absolute;
        top: 32px;
        right: -2px;
        transform: translateX(120%);
        background: white;
        border-radius: 15px;
        box-shadow: -5px -5px 0 0 var(--gray-9);
      }
    }
  }
}
